<template>
  <el-container>
    <el-main>
      <div style="line-height: 30px; height: 30px;margin-bottom:60px">
        <el-form ref="queryData" :model="queryData" inline size="mini" style="height: 30px;">
          <!-- <el-form-item prop="username">
            <el-input v-model="queryData.name" placeholder="申请商户名称" style="width: 120px;" />
          </el-form-item> -->
          <el-form-item prop="username">
            <el-input v-model="queryData.name" placeholder="门店名称" style="width: 120px;" />
          </el-form-item>
          <el-form-item prop="username">
            <el-input v-model="queryData.payOrderCode" placeholder="订单号" style="width: 120px;" />
          </el-form-item>
          <el-form-item prop="username">
            <el-input v-model="queryData.terminalRecordNo" placeholder="终端流水号" style="width: 120px;" />
          </el-form-item>
          <el-form-item prop="username">
            <el-select
              v-model="queryData.payType"
              placeholder="支付方式"
            >
              <el-option label="支付成功" value="1" />
              <el-option label="转入退款" value="2" />
              <el-option label="未支付" value="3" />
              <el-option label="已关闭" value="4" />
              <el-option label="用户支付中" value="5" />
              <el-option label="已撤回" value="6" />
              <el-option label="未支付支付超时" value="7" />
              <el-option label="支付失败" value="8" />
            </el-select>
          </el-form-item>
          <el-form-item prop="username">
            <el-select
              v-model="queryData.status"
              placeholder="交易状态"
            >
              <el-option label="创建" value="0" />
              <el-option label="付款" value="1" />
              <el-option label="退款" value="2" />
              <el-option label="取消" value="3" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <datePicker :time="queryData.time" @change="getTime" />
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" plain icon="el-icon-search" size="mini" @click="queryPageList">查询</el-button>
            <el-button type="info" icon="el-icon-refresh" size="mini" @click="reset('queryData')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table v-loading="loading" :data="pageTableData" border size="small" max-height="700">
        <el-table-column label="订单号" prop="payOrderCode" header-align="center" align="center" width="80" />
        <el-table-column label="终端流水号" prop="terminalRecordNo" header-align="center" align="center" min-width="140" />
        <el-table-column label="交易类型" prop="payStatus" header-align="center" align="center" width="80">
          <template slot-scope="scope">
            <p>
              {{
                {
                  1: "支付成功",
                  2: "转入退款",
                  3: "未支付",
                  4: "已关闭",
                  5: "用户支付中",
                  6: "已撤回",
                  7: "未支付支付超时",
                  8: "支付失败",
                }[scope.row.payStatus]
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="门店名称" prop="roleNames" header-align="center" align="center" min-width="260" />
        <el-table-column label="交易金额" prop="amount" header-align="center" align="center" min-width="100" />
        <el-table-column label="交易时间" prop="payTime" header-align="center" align="center" min-width="140" />
        <el-table-column label="支付方式" prop="payType" header-align="center" align="center" width="80">
          <template slot-scope="scope">
            <p>
              {{scope.row.payType == '010' ? '微信' : scope.row.payType == '020' ? '支付宝' : scope.row.payType == '060' ? 'QQ钱包' : 
                 scope.row.payType == '100' ? '翼支付' :   scope.row.payType == '140' ? '和包支付（仅限和包通道)' : scope.row.payType == '150' ? '福卡支付' : '--'  
               }}
            </p>
          </template>
        </el-table-column>

        <el-table-column label="交易状态" prop="status" header-align="center" align="center" width="80">
          <template slot-scope="scope">
            <p>
              {{
                {
                  0:"创建",
                  1: "付款",
                  2: "退款",
                  3: "取消",
                }[scope.row.status]
              }}
            </p>
          </template>
        </el-table-column>
        <el-table-column label="操作"  header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="showDetail(scope.row)"
            >查看</el-button>
            <el-button
              type="text"
              size="mini"
              @click="backMoney(scope.row)"
            >退款</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer style="text-align: right">
      <el-pagination
        :current-page="queryData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.totalCount"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </el-footer>

  </el-container>

</template>

<script>
import datePicker from '@/components/model/component/date-picker/startEndTime.vue'
import { sysAjax } from 'Ajax'
export default {
  name: 'SCAN',
  components: {
    datePicker
  },
  data() {
    return {
      loading: false,
      queryData: {
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      },
      pageTableData: [],
      roleList: []
    }
  },
  created() {
    this.queryPageList()
    sysAjax.getRoleSelectList().then(data => {
      this.roleList = data
    })
  },
  methods: {
    getTime(val) {
      this.queryData.startTime = val.startTime
      this.queryData.endTime = val.endTime
    },

    reset(formName) {
      this.$refs[formName].resetFields()
      this.queryPageList()
    },
    queryPageList() {
      this.loading = true
      sysAjax.pageList(this.queryData).then(response => {
        // this.pageTableData = [{id:10}]
        this.pageTableData = response.records
        this.queryData.pageNum = response.currPage
        this.queryData.pageSize = response.pageSize
        this.queryData.totalCount = response.totalCount
        this.loading = false
      })
    },
    pageChange(pageNo, pageSize) {
      this.queryData.pageNum = pageNo
      this.queryData.pageSize = pageSize
      this.queryPageList()
    },
    pageSizeChange(val) {
      this.queryData.pageSize = val
      this.queryPageList()
    },
    pageCurrentChange(val) {
      this.queryData.pageNum = val
      this.queryPageList()
    },
    showDetail(val) {
      this.$router.push('/order/scan/detail?id='+ val.id)
    },
    backMoney(val) {
       this.$confirm('是否确认退款?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysAjax.orderRefund({id:val.id}).then(response => {
          this.msgSuccess('退款成功')
        })
      })
    }
  }
}
</script>
<style scoped lang='scss'>
/deep/ .el-form-item__label {
  font-size: 13px;
  font-weight: 500;
}
</style>
